import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native'

export default class CourseOverViewComponent extends Component {
  courseOverView(){
    let courseOverViews = [
      {
        name: '剩余课时',
        total: 18,
        done: 2,
        page: 'ReNew'
      },
      {
        name: '完成作业',
        total: 18,
        done: 16,
        page: 'ReNew'
      },
      {
        name: '请假次数',
        total: 10,
        done: 2,
        page: 'Leave'
      }
    ];
     let courseOverView = <View style={styles.courseOverView}>
      {courseOverViews.map((item, index) => {
        return (
          <View style={styles.courseOverViewItem} key={index}>
            <TouchableOpacity onPress={() => {
              }}>
              <View style={styles.courseOverViewData}>
                <Text style={styles.courseOverViewTotal}>
                  <Text style={styles.courseOverViewDone}>{item.done}</Text>
                  /{item.total}
                </Text>
              </View>
              <Text style={styles.courseOverViewName}>{item.name}</Text>
            </TouchableOpacity>
          </View>
        )
      })}
    </View>
    return courseOverView;
  }
  render() {
    return (
      this.courseOverView()
    )
  }
}

const styles = StyleSheet.create({
  courseOverView: {
    flexDirection: 'row',  
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: 8,
    paddingTop: 24,
    paddingRight: 24,
    paddingBottom: 24,
    paddingLeft: 24,
    marginTop: -25,
    marginBottom: 20,
    backgroundColor: '#fff',
    shadowOffset: {width: 7, height: 7},
    shadowColor: '#FFF3F4',
    shadowOpacity: 0.5,
    shadowRadius: 3,
    elevation: 7
  },
  courseOverViewItem: {
    textAlign: 'center',
  },
  courseOverViewData: {
    alignItems: 'center',
  },
  courseOverViewDone: {
    color: '#282828',
    fontSize: 16
  },
  courseOverViewTotal: {
    color: '#282828',
    fontSize: 14
  },
  courseOverViewName: {
    color: '#999',
    fontSize: 12,
  },
})